<!DOCTYPE html>
<html>

<head>
    <title>学生信息管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App  -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">

 <!-- 引入vue框架 -->
 <script src="../lib/js/vue.js"></script>
 <!-- 引入axios库 -->
 <script src="../lib/js/axios.js"></script>
 <!-- 引入config -->
 <script src="../lib/js/config.js"></script>

    <style>
        /*下拉框样式  */
        .student-dropdown {
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            width: 200px;
            z-index: 1000;
        }

        .student-dropdown ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .student-dropdown li {
            padding: 8px 12px;
            cursor: pointer;
        }

        .student-dropdown li:hover {
            background-color: #f0f0f0;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            /* 固定位置 */
            z-index: 1;
            /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            /* 半透明背景 */
        }


        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            padding: 20px;
            border-radius: 8px;
            /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        /* 表单字段样式 */
        .modal-content form {
            display: flex;
            flex-direction: column;
        }

        .modal-content form label {
            margin-top: 10px;
        }

        .modal-content form input {
            margin-top: 5px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            /* 输入框圆角 */
            transition: border-color 0.3s;
        }

        .modal-content form input:focus {
            border-color: #66afe9;
            outline: none;
        }

        .modal-content form button {
            margin-top: 20px;
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            /* 按钮圆角 */
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .modal-content form button:hover {
            background-color: #0056b3;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li>成绩管理</li>
                            <li class="active">老师添加成绩、修改成绩</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i
                                                    class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge success">1</span> <i class="fa fa-check icon"></i>
                                                new orders
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge danger">2</span> <i class="fa fa-comments icon"></i>
                                                customers messages
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false">Emily Hart <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i>
                                                Profile</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
                                                Logout</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-paper-plane"></div>
                                <div class="title">大学生信息管理系统</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="../html/index.html">
                                    <span class="icon fa fa-tachometer"></span><span class="title">首页</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-desktop"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="./personalInformation.html">个人信息管理</a></li>
                                            <li><a href="./viewCourse.html">查看课程</a></li>
                            </li>
                        </ul>
                    </div>
            </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-table">
                    <span class="icon fa fa-table"></span><span class="title">学生管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-table" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../table/studentInformationManage.html">学生信息管理</a>
                            </li>
                            <li><a href="../table/datatable.html">学生选课管理</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-form">
                    <span class="icon fa fa-file-text-o"></span><span class="title">班级管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-form" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./form/class.html">班级管理</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#component-example">
                    <span class="icon fa fa-cubes"></span><span class="title">课程管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="component-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="components/course.html">课程管理</a>
                            </li>
                            <!--<li><a href="../components/chartjs.html">Chart.JS</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="active panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-example">
                    <span class="icon fa fa-slack"></span><span class="title">成绩管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./score.html">学生查看个人成绩</a>
                            </li>
                            <li><a href="./scoreManagement.html">老师添加成绩、修改成绩</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-icon">
                    <span class="icon fa fa-archive"></span><span class="title">系统管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-icon" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./log.html">日志管理</a>
                            </li>
                           <!-- <li><a href="../icons/font-awesome.html">Font Awesomes</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="../license.html">
                    <span class="icon fa fa-thumbs-o-up"></span><span class="title">License</span>
                </a>
            </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
        </nav>
    </div>
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">

            <div class="row">


                <div class="col-md-4">
                    <!-- 首页 -->
                    <a href="../index.html">
                        <img src="../home.png" alt="">返回首页
                    </a>

                    <!-- 设置图标大小 -->
                    <style>
                        img {
                            width: 30px;
                            height: 30px;
                        }
                    </style>
                </div>
                <!-- 录入学生成绩 -->
                <!-- <div class="col-md-4">
                    <a href="#" id="openModal">
                        <img src="../addClass.png" alt="">添加成绩
                    </a>
                </div> -->
                <!-- 录入学生成绩模态框 -->
              <!--   <div id="addScoreModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>录入学生成绩</h2>
                        <form id="scoreForm">
        

                            <label for="score">成绩:</label>
                            <input type="number" id="score" name="score" required>

                            <button type="submit">确定</button>
                            <button type="button" onclick="closeScoreModal()">取消</button>
                        </form>
                    </div>
                </div> -->

                   <!-- 修改学生成绩模态框 -->
                  <!--  <div id="openUpdateModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>修改成绩</h2>
                        <form id="classForm_update">
                            <label for="updateStudentId">学号:</label>
                            <input type="number" id="updateStudentId" name="updateStudentId" required readonly>

                            <label for="updateStudentName">姓名:</label>
                            <input type="text" id="updateStudentName" name="updateStudentName" required readonly>

                            <label for="updateCourseName">课程名:</label>
                            <input type="text" id="updateCourseName" name="updateCourseName" required readonly>

                            <label for="updateScore">成绩:</label>
                            <input type="text" id="updateScore" name="updateScore" required>

                            <button type="submit">确定</button>
                            <button type="button" onclick="closeModel1()">取消</button>
                        </form>
                    </div>
                </div> -->

                <!-- 查询表单-->
                <!--     <div class="col-md-4">
                    <form class="form-inline">

                        <div class="form-group mx-sm-3 mb-2">
                            <label for="inputPassword2" class="sr-only">输入查询信息</label>
                            <input type="text" class="form-control" id="inputPassword2" placeholder="输入查询信息">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">查询</button>
                
                    </form>
                </div> -->


                <!-- 录入学生成绩模态框 -->
                <div id="addScoreModal" class="modal">
                    <div class="modal-content">
                        <span class="close" id="closeAddScoreModal">&times;</span>
                        <h2>录入学生成绩</h2>
                        <form id="scoreForm">
                            <label for="score">成绩:</label>
                            <input type="number" id="score" name="score" required>
                            <button type="submit">确定</button>
                            <button type="button" @click="closeAddScoreModal">取消</button>
                        </form>
                    </div>
                </div>



                <div id="updateScoreModal" class="modal">
                    <div class="modal-content">
                        <span class="close" id="closeUpdateScoreModal">&times;</span>
                        <h2>修改学生成绩</h2>
                        <form id="updateScoreForm">
                            <label for="updateScore">成绩:</label>
                            <input type="number" id="updateScore" name="updateScore" required>
                            <button type="submit">确定</button>
                            <button type="button" @click="closeUpdateScoreModal">取消</button>
                        </form>
                    </div>
                </div>


                

            </div>
            <div id="scoreInformationManagement">
                <div class="col-xs-12">
                    <div class="card-header">
                        <div class="card-title">
                            <div class="title" style="font-size: large;">课程列表</div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 点击选择按钮，出现复选框，勾选班级，进行操作 -->
                        <button id="showCheckboxesButton" class="btn btn-primary">选择</button>
                        <button id="selectAllButton" class="btn btn-primary" style="display: none;">全选</button>
                        <!-- <button id="deleteSelectedButton" class="btn btn-primary" style="display: none;">删除选中</button> -->
                        <button id="modifyButton" class="btn btn-primary" style="display: none;">修改</button>
                        <div id="queryClassInformation">
                            <!-- 查询表单-->
                            <!--  <div class="col-md-4">
                                    <form class="form-inline" @submit.prevent="queryStudentByNameOrId">
                                        <div class="form-group mx-sm-3 mb-2">
                                            <label for="inputSearch" class="sr-only">输入查询信息</label>
                                            <input type="text" class="form-control" name="keyword" id="inputSearch"
                                                placeholder="输入查询信息" v-model="keyword">
                                        </div>
                                        <button type="button" class="btn btn-primary mb-2"
                                            @click="queryStudentByNameOrId">查询</button>
                                    
                                    </form>
                                </div> -->

                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col">#</th>
                                            <th scope="col" style="display: none;">课程表id</th>
                                            <th scope="col">学号</th>
                                            <th scope="col">姓名</th>
                                            <th scope="col">课程ID</th>
                                            <th scope="col">课程名</th>
                                            <th scope="col" >成绩表ID</th>
                                            <th scope="col">成绩</th>
                                            <th scope="col">添加成绩</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 循环遍历数据 -->
                                        <tr v-for="(score, index) in studentScoreList" :key="index">
                                            <td><input type="checkbox" class="row-checkbox" :id="'checkbox-1' + (index + 1)" style="display: none;"></td>
                                            <th scope="row">{{ index + 1 }}</th>
                                            <td style="display: none;">{{ score.coursetableId }}</td>
                                            <td>{{ score.studentId }}</td>
                                            <td>{{ score.studentName }}</td>
                                            <td>{{ score.courseId }}</td>
                                            <td>{{ score.courseName }}</td>
                                            <td>{{ score.scoreId }}</td>
                                            <td>{{ score.score }}</td>
                                            <td style="color: #66afe9;">
                                                <button class="addScoreButton" @click="openAddScoreModal(score)">添加</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                    </div>
                </div>
                </div>
            </div>

        <script>
var scoreInformation = new Vue({
    el: '#scoreInformationManagement',
    data: {
        studentScoreList: [], // 初始化为空数组
        keyword: '',
        scoreDTO: {
            coursetableId: '',
            scoreId: '',
            score: ''
        },
        updateScore: {
            coursetableId: '',
            scoreId: '',
            score: ''
        }
    },
    mounted() {
        // 初始化页面时，调用 getStudentScoreList 方法
        this.getStudentScoreList();
        
        // 绑定模态框关闭按钮事件
        document.getElementById('closeAddScoreModal').addEventListener('click', this.closeAddScoreModal);
        document.getElementById('closeUpdateScoreModal').addEventListener('click', this.closeUpdateScoreModal);

        // 绑定模态框表单提交事件
        document.getElementById('scoreForm').addEventListener('submit', this.submitScoreForm);
        document.getElementById('updateScoreForm').addEventListener('submit', this.submitUpdateScoreForm);
    },
    methods: {
        // 分页显示学生成绩信息
        getStudentScoreList() {
            axios.get('/courseTable/queryCourseTableByPage')
                .then(response => {
                    console.log('获取到的课程列表:', response.data); // 添加这行代码以调试
                    this.studentScoreList = response.data.data;
                })
                .catch(error => {
                    console.error('获取列表失败:', error);
                });
        },
        // 添加成绩
        addStudentScore(scoreDTO) {
            axios.post('/score/addStudentScore', scoreDTO)
                .then(response => {
                    if (response.data.data == true) {
                        this.getStudentScoreList(); // 刷新列表
                        console.log("添加成绩成功", response.data);
                    } else {
                        console.error("添加失败:");
                    }

                    // 关闭模态框
                    this.closeAddScoreModal();

                    // 清空表单
                    this.scoreDTO.coursetableId = '';
                    this.scoreDTO.scoreId = '';
                    this.scoreDTO.score = '';
                })
                .catch(error => {
                    console.error('添加成绩失败:', error);
                });
        },
        // 修改成绩
        updateStudentScore(scoreDTO) {
            axios.post('/score/addStudentScore', scoreDTO) // 确保使用正确的 API 端点
                .then(response => {
                    if (response.data.data == true) {
                        this.getStudentScoreList(); // 刷新列表
                        console.log("更新成绩成功", response.data);
                    } else {
                        console.error("更新失败:");
                    }

                    // 关闭模态框
                    this.closeUpdateScoreModal();

                    // 清空表单
                    this.updateScore.coursetableId = '';
                    this.updateScore.scoreId = '';
                    this.updateScore.score = '';
                })
                .catch(error => {
                    console.error('更新成绩失败:', error);
                });
        },
        // 打开添加成绩模态框的方法
        openAddScoreModal(score) {
            this.scoreDTO.coursetableId = score.coursetableId;
            this.scoreDTO.scoreId = score.scoreId;
            this.scoreDTO.score = score.score;
            document.getElementById('addScoreModal').style.display = 'block';
        },
        // 关闭添加成绩模态框的方法
        closeAddScoreModal() {
            document.getElementById('addScoreModal').style.display = 'none';
        },
        // 打开修改成绩模态框的方法
        openUpdateScoreModal(score) {
            this.updateScore.coursetableId = score.coursetableId;
            this.updateScore.scoreId = score.scoreId;
            this.updateScore.score = score.score;
            document.getElementById('updateScoreModal').style.display = 'block';
        },
        // 关闭修改成绩模态框的方法
        closeUpdateScoreModal() {
            document.getElementById('updateScoreModal').style.display = 'none';
        },
        // 提交添加成绩表单的方法
        submitScoreForm(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            const score = document.getElementById('score').value;
            this.scoreDTO.score = score;
            this.addStudentScore(this.scoreDTO);
        },
        // 提交修改成绩表单的方法
        submitUpdateScoreForm(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取表单数据
            var score = document.getElementById('updateScore').value;

            // 构建成绩对象
            var scoreDTO = {
                coursetableId: this.updateScore.coursetableId,
                scoreId: this.updateScore.scoreId,
                score: score,
            };

            console.log('提交的成绩信息:', scoreDTO); // 调试输出

            // 调用 Vue 实例中的 updateStudentScore 方法
            this.updateStudentScore(scoreDTO);
        }
    }
});

document.getElementById("scoreForm").addEventListener("submit", function (event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取表单数据
    var score = document.getElementById("score").value;

    // 构建成绩对象
    var scoreDTO = {
        // coursetableId: scoreInformation.addScore.coursetableId,
        coursetableId:scoreInformation.scoreDTO.coursetableId,
        scoreId: scoreInformation.scoreDTO.scoreId,
        score: scoreInformation.scoreDTO.score,
    };

    console.log('提交的成绩信息:', scoreDTO); // 调试输出

    // 调用 Vue 实例中的 addStudentScore 方法
    scoreInformation.addStudentScore(scoreDTO);
});





function closeScoreModal() {
    var modal = document.getElementById("addScoreModal");
    modal.style.display = "none";
}
document.addEventListener('DOMContentLoaded', function () {
    // 显示复选框按钮事件
    document.getElementById('showCheckboxesButton').addEventListener('click', function () {
        var checkboxes = document.querySelectorAll('.row-checkbox');
        var selectAllButton = document.getElementById('selectAllButton');
        var modifyButton = document.getElementById('modifyButton'); 

        checkboxes.forEach(function (checkbox) {
            checkbox.style.display = checkbox.style.display === 'none' ? 'block' : 'none';
        });

        // 显示或隐藏全选和修改按钮
        if (selectAllButton.style.display === 'none') {
            selectAllButton.style.display = 'inline-block';
            modifyButton.style.display = 'inline-block';
        } else {
            selectAllButton.style.display = 'none';
            modifyButton.style.display = 'none';
        }
    });

    // 全选按钮事件
    document.getElementById('selectAllButton').addEventListener('click', function () {
        var checkboxes = document.querySelectorAll('.row-checkbox');
        checkboxes.forEach(function (checkbox) {
            checkbox.checked = true;
        });
    });

    // 修改按钮事件
    document.getElementById('modifyButton').addEventListener('click', function () {
        // 获取选中的行
        var selectedRows = document.querySelectorAll('.row-checkbox:checked');
        if (selectedRows.length === 1) {
            var row = selectedRows[0].closest('tr');
            
            // 获取 coursetableId 和 scoreId
            var coursetableIdCell = row.querySelector('td:nth-child(3)');
            var scoreIdCell = row.querySelector('td:nth-child(8)'); // scoreId 实际上位于第 8 列
            var scoreCell = row.querySelector('td:nth-child(9)');
            
            var coursetableId = coursetableIdCell ? coursetableIdCell.textContent.trim() : '';
            var scoreId = scoreIdCell ? scoreIdCell.textContent.trim() : undefined;
            var score = parseFloat(scoreCell.textContent.trim());

            // 打开模态框并填充数据
            scoreInformation.openUpdateScoreModal({ coursetableId, scoreId, score });
        } else {
            alert('请选择一行进行修改');
        }
    });

    // 关闭修改模态框事件
    document.getElementById('closeUpdateScoreModal').addEventListener('click', function () {
        document.getElementById('updateScoreModal').style.display = 'none';
    });

    // 提交修改表单事件
    document.getElementById('updateScoreForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单数据
        var score = document.getElementById('updateScore').value;

        // 构建成绩对象
        var scoreDTO = {
            coursetableId: scoreInformation.updateScore.coursetableId,
            scoreId: scoreInformation.updateScore.scoreId,
            score: score,
        };

        console.log('提交的成绩信息:', scoreDTO); // 调试输出

        // 调用 Vue 实例中的 updateStudentScore 方法
        scoreInformation.updateStudentScore(scoreDTO);
    });

    // 当用户点击模态框外部时，关闭模态框
    window.onclick = function (event) {
        var addScoreModal = document.getElementById("addScoreModal");
        var updateScoreModal = document.getElementById("updateScoreModal");
        if (event.target == addScoreModal) {
            scoreInformation.closeAddScoreModal();
        } else if (event.target == updateScoreModal) {
            scoreInformation.closeUpdateScoreModal();
        }
    };
});

            


        </script>




        










        
    </div>


    </div>
    </div>

    <footer class="app-footer">
        <div class="wrapper">
            <span class="pull-right" style="text-align: center;">2.1 <a href="#"><i
                        class="fa fa-long-arrow-up"></i></a></span> © 2024-12-LUT-PRACTICE
        </div>
    </footer>









    <!-- Javascript Libs -->
    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>

    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="../js/app.js"></script>


</body>

</html>